<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>支付</title>
  <link rel="stylesheet" href="../static/framework/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../static/framework/reset.css">
  <link rel="stylesheet" href="../static/css/footer.css">
  <link rel="stylesheet" href="../static/css/editRecipient.css">
  <link href="../static/layui-v2.9.1/layui/css/layui.css" rel="stylesheet">
  <script src="../static/layui-v2.9.1/layui/layui.js"></script>
  <link rel="stylesheet" href="../static/bootstrap-5.3.0-dist/css/bootstrap.min.css">
  <script src="../static/bootstrap-5.3.0-dist/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="../static/css/recipientList.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  <style>


  body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    margin: 0;
  }

  .container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }

  .record {
    padding: 15px;
    border-bottom: 1px solid #e0e0e0;
  }

  .date {
    font-size: 18px;
    color: #666;
    margin-bottom: 10px;
  }

  .transaction {
    display: flex;
    justify-content: center;
    height: 36px;
  }

  .amount {
    font-size: 24px;
    font-weight: bold;
    color: #4caf50;
  }

  .amount.negative {
    color: #f44336;
  }

  .card-info {
    margin-top: 10px;
  }

  .idNumber {
    color: #888;
    font-size: 14px;
  }

  .payment-type {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: 10px;
    height: 100%;
  }

  .type {
    display: inline-block;
    padding: 5px 10px;
    background-color: #2196f3;
    color: white;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 0;
  }


  .type:nth-child(2) {
    background-color: #ff9800;
  }

  .type:nth-child(3) {
    background-color: #4caf50;
  }

  .type:nth-child(4) {
    background-color: #9c27b0;
  }

  .layui-inline{
    display: flex;
    justify-content: center;
  }
  .date{
    display: flex;
    justify-content: center;
  }
  .search{
    border-radius: 5px;
    background-color: #01aaed;
    cursor: pointer;
    transition: background-color 0.3s ease; /* 添加过渡效果 */
    border: none;
    color: #fafafa;
    padding: 0px 2px;
    font-size: 14px;
    height: 30px;
    margin-left: 10px;
    margin-top: auto;
    margin-bottom: auto;
  }
  .search:hover {
    background-color: #0b7dda; /* 悬停时的背景颜色 */
  }
  search:focus {
    outline: none; /* 移除聚焦时的边框 */
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); /* 添加聚焦时的阴影效果 */
  }
  .layui-inline{
    margin-left: 0;
  }
  .layui-input-inline{
    width: 120px;
  }
  .layui-input{
    margin-right: auto;
  }
</style>
</head>
<body>
  <div class="wrapper" style="padding: 20px;">
    <header style="display: flex;">
      <i class="fa fa-angle-left fa-2x" onclick="location.href='/index'" style="font-size: 20px;">首页</i>
      <p style="margin: auto;">收支</p>
      <p style="margin-right: 46.84px;"></p>
    </header>
    <br><br>

    <div class="layui-form">
      <div class="layui-inline">
        <form action="/payment/selectByDate" method="post" class="date">

          <div class="layui-inline" id="ID-laydate-range">

            <div class="layui-input-inline">
              <input  type="text" name="lowTime" autocomplete="off" id="ID-laydate-start-date" class="layui-input" placeholder="开始日期">
            </div>

            <div class="layui-form-mid">&nbsp;&nbsp;--</div>

            <div class="layui-input-inline">
              <input  type="text" name="highTime" autocomplete="off" id="ID-laydate-end-date" class="layui-input" placeholder="结束日期">
            </div>
            <br>

          </div>
          <button type="submit" class="search">搜索</button>

        </form>

      </div>
    </div>

    <script>
      layui.use(function(){
        var laydate = layui.laydate;

        // 日期范围选择器
        layui.use('laydate', function(){
          var laydate = layui.laydate;

          // 渲染日期范围选择器
          laydate.render({
            elem: '#ID-laydate-start-date', // 指定元素
            range: false, // 单个日期选择器
            trigger: 'click' // 显示方式，这里使用'click'触发
          });

          laydate.render({
            elem: '#ID-laydate-end-date', // 指定元素
            range: false, // 单个日期选择器
            trigger: 'click' // 显示方式，这里使用'click'触发
          });
        });
      });


    </script>

    <div class="container" th:each="payment : ${session.payments}" style="margin-top: 10px;">
      <div class="record">
        <div class="date" th:text="${payment.payDate}">2022.1.1</div>
        <div class="transaction" th:switch="${payment.transType}">
          <p class="amount" th:case="1" th:text="'+ ￥ ' +  ${payment.money}"></p>
          <p class="amount negative" th:case="2" th:text="'- ￥ ' +  ${payment.money}"></p>
        </div>
        <div class="card-info">
          <div class="idNumber" th:text="'支付方卡号：' + ${payment.cardId}"></div>
          <div class="idNumber" th:text="'接收方卡号：' + ${payment.recardId}"></div>
        </div>
        <div class="payment-type" th:switch="${payment.payType}">
          <div class="type" th:case="1">转账</div>
          <div class="type" th:case="2">网银在线</div>
          <div class="type" th:case="3">支付宝</div>
          <div class="type" th:case="4">微信支付</div>
        </div>
      </div>
    </div>

    <br><br><br>
    <footer class="footer">
      <div>
        <button type="button" class="layui-btn">
          <i class="layui-icon layui-icon-left"></i>
        </button>
        <button type="button" class="layui-btn">
          <i class="layui-icon layui-icon-right"></i>
        </button>
      </div>
    </footer>

  </div>
  <script>
    const back = document.querySelector('button:first-child')
    const forword = back.nextElementSibling
    back.addEventListener('click', function () {
      //history.back()
      history.go(-1)
    })

    forword.addEventListener('click', function () {
      //history.forward()
      history.go(1)
    })

    layui.use(function(){
      var laydate = layui.laydate;

      // 日期范围选择器
      layui.use('laydate', function(){
        var laydate = layui.laydate;

        // 渲染日期范围选择器
        laydate.render({
          elem: '#ID-laydate-start-date', // 指定元素
          range: false, // 单个日期选择器
          trigger: 'click' // 显示方式，这里使用'click'触发
        });

        laydate.render({
          elem: '#ID-laydate-end-date', // 指定元素
          range: false, // 单个日期选择器
          trigger: 'click' // 显示方式，这里使用'click'触发
        });
      });

    });


  </script>
</body>

</html>